<template>
  <div
    class="relative flex h-full w-full overflow-hidden transition-colors z-0"
  >
    <div
      class="relative flex h-full max-w-full flex-1 flex-col overflow-hidden"
    >
      <TopMini :model="model" />
      <div
        class="no-draggable flex w-full items-center justify-center bg-token-main-surface-primary md:hidden"
      ></div>
      <main
        class="relative h-full w-full flex-1 overflow-auto transition-width"
      >
        <div
          v-if="status === ''"
          role="presentation"
          class="composer-parent flex h-full flex-col focus-visible:outline-0"
          tabindex="0"
        >
          <div class="flex-1 overflow-hidden @container/thread">
            <div class="relative h-full">
              <div class="absolute left-0 right-0">
                <Top :model="model" />
              </div>
              <Dialog :model="model" />
            </div>
          </div>
        </div>
        <div
          v-else
          role="presentation"
          class="composer-parent flex h-full flex-col focus-visible:outline-0"
        >
          <div class="flex-1 overflow-hidden @container/thread">
            <div class="h-full">
                <!-- 这里用的 react-scroll-to-bottom -->
              <div class="react-scroll-to-bottom--css-becus-79elbk h-full">
                <div class="react-scroll-to-bottom--css-becus-1n7m0yu">
                  <div class="flex flex-col text-sm md:pb-9" style="">
                    <Top :model="model" />
                    <!-- 中间插入对话内容 -->
                    <ChartContent />
                    <BtnScrollToBottom />
                  </div>
                </div>
                <button
                  class="react-scroll-to-bottom--css-becus-1tj0vk3 hidden"
                  type="button"
                ></button>
              </div>
            </div>
          </div>

          <!-- 对话框 -->
          <div
            class="md:pt-0 dark:border-white/20 md:border-transparent md:dark:border-transparent w-full"
          >
            <div>
              <div
                class="m-auto text-base px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5"
              >
                <div
                  class="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl"
                >
                  <div class="flex justify-center"></div>
                  <FormTxt :model="model" />
                </div>
              </div>
              <div
                class="relative w-full px-2 py-2 text-center text-xs text-token-text-secondary empty:hidden md:px-[60px]"
              >
                <LabVersion />
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
import Sidebar from "./Sidebar.vue";
import Top from "./Top.vue";
import TopMini from "./TopMini.vue";
import Dialog from "./Dialog.vue";
import LabVersion from "./components/LabVersion.vue";
import ChartContent from "./components/ChartContent.vue";
import BtnScrollToBottom from "./components/BtnScrollToBottom.vue";
import FormTxt from "./components/FormTxt.vue";

// 模型名称
const model = ref("Spark Lite");
const status = ref("working");
// import CryptoES from "crypto-es";
// const refResult = ref('HelloWord2')

// const ws = ref();

// refResult.value = '开始测试'
// const signUrl = `ws://localhost:8765/test?api_key=112233`
// ws.value = new WebSocket(signUrl)
// ws.value.onopen = () => {
//     console.log("连接成功");
// }
// ws.value.onmessage = (e) => {
//     // const msg = JSON.parse(e.data);
//     console.log(e, "广播返回的消息");
//   };
//   ws.value.onerror = (e) => {
//     //断连后每5秒重连一次
//     console.log("连接错误",e);
//   };
//   ws.value.onclose = (e) => {
//     //断连后每5秒重连一次
//     console.log("连接关闭",e);
//   };
// export default {

// }
</script>
 
<style scoped>
</style>